<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/yjx/icon/iconfont.css">
    <link rel="stylesheet" href="../../css/yjx/员工花名册.css">
    <link rel="stylesheet" href="../../css/wwl/icon/iconfont.css" />
    <link rel="stylesheet" href="../../css/wwl/demo.css" />
</head>

<body>
    <nav class="nav-ct">
        <div class="nav-hd">
            <span class="iconfont icon-oabangong"></span>
            <span class="title">办公后台系统</span>
        </div>
        <div class="center">
            <ul class="nav-content">
                <li><a href="">工作台</a></li>
                <li><a href="">数据大屏</a></li>
                <li><a href="">员工</a></li>
                <li><a href="">组织</a></li>
                <li><a href="">招聘</a></li>
                <li><a href="">考勤</a></li>
                <li><a href="">薪酬</a></li>
                <li><a href="">社保公积金</a></li>
                <li><a href="">绩效</a></li>
                <li><a href="">培训</a></li>
                <li><a href="">审批</a></li>
                <li><a href="">权限设置</a></li>
            </ul>
        </div>
    </nav>
    <div class="ct-box">
        <div class="nav-ct-2">
            <ul class="nav-ct-menu">
                <!-- <li class="title">组织架构
                            <ul>
                                <li><a href="">组织管理</a></li>
                                <li><a href="">组织架构图</a></li>
                                <li><a href="">工作职场</a></li>
                            </ul>
                        </li> -->
                <li class="title">员工管理
                    <ul>
                        <li><a href="./员工花名册.html">花名册</a></li>
                        <li><a href="./转正管理.html">转正管理</a></li>
                        <li><a href="./离职管理.html">离职管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 最外层盒子 -->
        <div class="y-largestbox">
            <!-- 搜索栏大盒子 -->
            <div class="y-searchbox">
                <h2 class="y-title">花名册</h2>
                <div class="y-search1">
                    <label for="" class="y-label ">姓名：</label>
                    <input type="text" class="y-input">
                    <label for="" class="y-label">职位：</label>
                    <select name="" id="" class="y-select">
                        <option value="前端开发">前端开发</option>
                        <option value="后端开发">后端开发</option>
                        <option value="UI设计">UI设计</option>
                        <option value="默认" selected></option>
                    </select>
                    <label for="" class="y-label">类型：</label>
                    <select name="" id="" class="y-select">
                        <option value="全职">全职</option>
                        <option value="实习">实习</option>
                        <option value="外包">外包</option>
                        <option value="默认" selected></option>
                    </select>
                </div>
                <div class="y-search2">
                    <label for="" class="y-label">部门：</label>
                    <select name="" id="" class="y-select">
                        <option value="研发部">研发部</option>
                        <option value="产品部">产品部</option>
                        <option value="技术部">技术部</option>
                        <option value="默认" selected></option>
                    </select>
                    <label for="" class="y-label">电话：</label>
                    <input type="text" class="y-input">
                    <button class="y-searchBtn">搜索</button>
                    <button class="y-resetBtn">重置</button>
                </div>
                <div class="y-screen clear">
                    <h5>筛选条件:</h5>
                    <div class="y-box1 clear" id="del1box">
                        <span class="y-title1">部门：研发部</span>
                        <span class="y-del" id="del1">x</span>
                    </div>
                    <div class="y-box1 clear" id="del2box">
                        <span class="y-title1">职位：前端开发</span>
                        <span class="y-del" id="del2">x</span>
                    </div>
                    <div class="y-box1 clear" id="del3box">
                        <span class="y-title1">姓名：张三</span>
                        <span class="y-del" id="del3">x</span>
                    </div>
                </div>
            </div>


            <!-- 表格大盒子 -->
            <div class="y-tablebox clear">
                <!-- 上方三个按钮 -->
                <div class="y-btnall clear">
                    <div class="y-import">
                        <span>导入</span>
                    </div>
                    <div class="y-export">
                        <span>导出</span>
                    </div>
                    <div class="y-newadd" data-toggle="modal" data-target="#identifier">
                        <!-- <span class="span span-primary span-lg" data-toggle="modal" data-target="#identifier">+新增员工</span> -->
                        +新增员工
                    </div>
                </div>


                <!-- bootstrap表格 -->
                <table class="table">
                    <thead>
                        <tr>
                            <th>头像/姓名</th>
                            <th>工号</th>
                            <th>手机号</th>
                            <th>所在部门</th>
                            <th>职位</th>
                            <th>类型</th>
                            <th>证件类型</th>
                            <th>证件号码</th>
                            <th>入职日期</th>
                            <th>在职状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                        <td><input type="checkbox" class="y-checkinput">张三</td>
                        <td>001</td>
                        <td>183***9220</td>
                        <td>研发部</td>
                        <td>前端开发</td>
                        <td>全职</td>
                        <td>身份证</td>
                        <td>510132***0612</td>
                        <td>2022-09-13</td>
                        <td class="y-state"><span>在职</span></td>
                        <td class="y-color"><span>删除</span></td>
                    </tr> -->
                    </tbody>
                </table>
                <!-- 分页 -->
                <div class="y-paging clear">
                    <ul class="pagination">
                        <!-- <li id="pre"><a href="#">&laquo;</a></li>
                    <li id="pages"><a href="#">1</a></li>
                    <li id="pages"><a href="#">2</a></li>
                    <li id="pages"><a href="#">3</a></li>
                    <li id="next"><a href="#">&raquo;</a></li> -->
                    </ul>
                    <!-- 多少条每页 -->
                    <div class="y-how">
                        <span></span>
                    </div>
                </div>
            </div>

            <!-- 删除按钮模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">警告</h4>
                        </div>
                        <div class="modal-body">确定删除这条数据吗？</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="y-yes">确认</button>
                            <button type="button" class="btn btn-primary" id="y-no">取消</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

            <!-- 新增按钮模态框（Modal） -->
            <div class="modal fade" id="identifier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">新增员工信息</h4>
                        </div>
                        <div class="modal-body">
                            <form action="">
                                <div class="row">
                                    <label for="" class="col-sm-3">姓名：</label><input type="text">
                                </div>
                                <div class="row">
                                    <label for="" class="col-sm-3">工号：</label><input type="text">
                                </div>
                                <div class="row">
                                    <label for="" class="col-sm-3">手机号：</label><input type="text">
                                </div>
                                <div class="row">
                                    <label for="" class="col-sm-3">部门：</label><input type="text">
                                </div>
                                <div class="row">
                                    <label for="" class="col-sm-3">职位：</label><input type="text">
                                </div>
                                <div class="row">
                                    <label for="" class="col-sm-3">类型：</label><input type="text">
                                </div>

                                <div class="row">
                                    <label for="" class="col-sm-3">身份证：</label><input type="text">
                                </div>
                                <div class="row">
                                    <label for="" class="col-sm-3">入职日期：</label><input type="text">
                                </div>
                                <div class="row">
                                    <label for="" class="col-sm-3">在职状态：</label><input type="text">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="y-yes2">提交</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
    </div>

    <script>
        // console.log($(".y-select").val());
        let data = [
            { name: "张一", job: "001", phone: "183***9220", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0612", date: "2022-09-13", state: "在职" },
            { name: "张二", job: "002", phone: "183***9221", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0613", date: "2022-09-13", state: "试用期" },
            { name: "张三", job: "003", phone: "183***9222", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0614", date: "2022-09-13", state: "待离职" },
            { name: "李一", job: "004", phone: "183***9223", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0615", date: "2022-09-13", state: "已离职" },
            { name: "李二", job: "005", phone: "183***9224", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0616", date: "2022-09-13", state: "待入职" },
            { name: "李三", job: "006", phone: "183***9225", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0617", date: "2022-09-13", state: "在职" },
            { name: "王一", job: "007", phone: "183***9226", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0618", date: "2022-09-13", state: "在职" },
            { name: "王二", job: "008", phone: "183***9227", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0619", date: "2022-09-13", state: "在职" },
            { name: "王三", job: "009", phone: "183***9228", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0620", date: "2022-09-13", state: "已离职" },
            { name: "杨一", job: "010", phone: "183***9229", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0621", date: "2022-09-13", state: "待入职" },
            { name: "杨二", job: "011", phone: "183***9230", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0622", date: "2022-09-13", state: "在职" },
            { name: "杨三", job: "012", phone: "183***9231", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0623", date: "2022-09-13", state: "在职" },
            { name: "赵一", job: "013", phone: "183***9232", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0624", date: "2022-09-13", state: "待入职" },
            { name: "赵二", job: "014", phone: "183***9233", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0625", date: "2022-09-13", state: "试用期" },
            { name: "赵三", job: "015", phone: "183***9234", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0626", date: "2022-09-13", state: "在职" },
            { name: "周一", job: "016", phone: "183***9235", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0627", date: "2022-09-13", state: "待离职" },
            { name: "周二", job: "017", phone: "183***9236", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0628", date: "2022-09-13", state: "在职" },
            { name: "周三", job: "018", phone: "183***9237", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0629", date: "2022-09-13", state: "在职" },
            { name: "吴一", job: "019", phone: "183***9238", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0630", date: "2022-09-13", state: "在职" },
            { name: "吴二", job: "020", phone: "183***9239", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0631", date: "2022-09-13", state: "在职" },
            { name: "吴三", job: "021", phone: "183***9240", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0632", date: "2022-09-13", state: "在职" },
            { name: "宋一", job: "022", phone: "183***9241", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0633", date: "2022-09-13", state: "已离职" },
            { name: "宋二", job: "023", phone: "183***9242", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0634", date: "2022-09-13", state: "在职" },
            { name: "宋三", job: "024", phone: "183***9243", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0635", date: "2022-09-13", state: "待入职" },
            { name: "唐一", job: "025", phone: "183***9244", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0636", date: "2022-09-13", state: "在职" },
            { name: "唐二", job: "026", phone: "183***9245", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0637", date: "2022-09-13", state: "试用期" },
            { name: "唐三", job: "027", phone: "183***9246", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0638", date: "2022-09-13", state: "在职" },
            { name: "高一", job: "028", phone: "183***9247", department: "研发部", position: "前端开发", type: "全职", Identification: "510132***0639", date: "2022-09-13", state: "待离职" },
            { name: "高二", job: "029", phone: "183***9248", department: "产品部", position: "后端开发", type: "实习", Identification: "510132***0640", date: "2022-09-13", state: "在职" },
            { name: "高三", job: "030", phone: "183***9249", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0641", date: "2022-09-13", state: "在职" },
            { name: "何一", job: "031", phone: "183***9250", department: "技术部", position: "UI设计", type: "外包", Identification: "510132***0642", date: "2022-09-13", state: "在职" },
        ];

        // 每页展示12条信息
        const pageSize = 12;

        // 渲染列表
        function renderTbody(data, currentPage = 1) {
            // 渲染分页
            renderPaging(data, currentPage);
            let startIndex = pageSize * (currentPage - 1); // 起始下标
            let endIndex = startIndex + pageSize; // 结束下标
            let dataByPaging = data.slice(startIndex, endIndex);

            // 多少条每页
            $(".y-how").text(`${dataByPaging.length}条/页`)

            $("tbody").empty();
            for (let i = 0; i < dataByPaging.length; i++) {
                $("tbody").append(`<tr>
                        <td><input type="checkbox" class="y-checkinput">${dataByPaging[i].name}</td>
                        <td>${dataByPaging[i].job}</td>
                        <td>${dataByPaging[i].phone}</td>
                        <td>${dataByPaging[i].department}</td>
                        <td>${dataByPaging[i].position}</td>
                        <td>${dataByPaging[i].type}</td>
                        <td>身份证</td>
                        <td>${dataByPaging[i].Identification}</td>
                        <td>${dataByPaging[i].date}</td>
                        <td class="y-state"><span>${dataByPaging[i].state}</span></td>
                        <td class="y-color">
                            <span id="delete" data-id="${dataByPaging[i].job}" data-toggle="modal" data-target="#myModal">删除</span>
                        </td>
                    </tr>`)
            }


        }

        renderTbody(data);

        // 渲染分页
        function renderPaging(data, currentPage = 1) {
            $(".pagination").empty();
            $(".pagination").append(`<li id="pre"><a href="#">&laquo;</a></li>`)
            let num = Math.ceil(data.length / pageSize);
            for (let i = 1; i <= num; i++) {
                $(".pagination").append(`<li id="pages"><a href="#">${i}</a></li>`);
            }
            $(".pagination").append(`<li id="next"><a href="#">&raquo;</a></li>`);
            $("#pages>a").eq(currentPage - 1).addClass("y-pagingcolor")
        }

        // 分页点击事件
        $(".pagination").on("click", "#pages", function (event) {
            console.log(event.target);
            let currentPage = parseInt($(event.target).text());
            renderTbody(data, currentPage)
        })

        // 上一页
        $(".pagination").on("click", "#pre", function () {
            // 获取当前页
            let currentPage = parseInt($(".pagination .y-pagingcolor").text());
            // console.log(currentPage);
            // 计算最多有多少页
            if (currentPage === 1) {
                return;
            }
            renderTbody(data, currentPage - 1);
        })

        // 下一页
        $(".pagination").on("click", "#next", function () {
            // 获取当前页
            let currentPage = parseInt($(".pagination .y-pagingcolor").text());
            // console.log(currentPage);
            // 计算最多有多少页
            let max = Math.ceil(data.length / pageSize);
            if (currentPage === max) {
                return;
            }
            renderTbody(data, currentPage + 1);
        })

        // 删除
        $("tbody").on("click", "#delete", function (event) {
            let dataId = $(event.target).attr("data-id");
            // console.log(dataId); // 字符串类型

            // 确认
            $("#y-yes").on("click", function () {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].job === dataId) {
                        data.splice(i, 1);
                    }
                }
                renderTbody(data);
            })

            // 取消
            $("#y-no").on("click", function () {
                $('#myModal').modal('hide');
            })
        })

        // 新增员工
        // console.log($(".modal-body input").length);
        $("#y-yes2").on("click", function () {
            for (let i = 0; i < $(".modal-body input").length; i++) {
                if (!$(".modal-body input").eq(i).val()) {
                    $(".modal-body input").val("");
                    $('#identifier').modal('hide');
                    return;
                }
            }
            let obj = {
                name: $(".modal-body input").eq(0).val(),
                job: $(".modal-body input").eq(1).val(),
                phone: $(".modal-body input").eq(2).val(),
                department: $(".modal-body input").eq(3).val(),
                position: $(".modal-body input").eq(4).val(),
                type: $(".modal-body input").eq(5).val(),
                Identification: $(".modal-body input").eq(6).val(),
                date: $(".modal-body input").eq(7).val(),
                state: $(".modal-body input").eq(8).val(),
            };
            data.push(obj);
            $(".modal-body input").val("");
            $('#identifier').modal('hide');
            renderTbody(data);


        })

        // 重置
        $(".y-resetBtn").on("click", function () {
            $(".y-select").val("");
            $(".y-input").val("");
        })

        // x删除
        $("#del1").on("click", function () {
            $("#del1box").remove();
        })

        $("#del2").on("click", function () {
            $("#del2box").remove();
        })

        $("#del3").on("click", function () {
            $("#del3box").remove();
        })

        // 模糊搜索
        $(".y-searchBtn").on("click", function () {
            let value1 = $(".y-input").eq(0).val(); // 姓名
            let value2 = $(".y-input").eq(1).val(); // 电话
            let value3 = $(".y-select").eq(0).val(); // 职位
            let value4 = $(".y-select").eq(1).val(); // 类型
            let value5 = $(".y-select").eq(2).val(); // 部门
            if (value1 == "" || value2 == "" || value3 == "默认" || value4 == "默认" || value5 == "默认") {
                // 恢复原来的数据
                renderTbody(data);
                return;
            }
            let searchData = [];
            for (let i = 0; i < data.length; i++) {
                if (data[i].name.includes(value1) !== true || data[i].phone.includes(value2) !== true || data[i].position.includes(value3) !== true || data[i].type.includes(value4) !== true || data[i].department.includes(value5) !== true) {
                    renderTbody(data);
                }
                if (data[i].name.includes(value1) === true && data[i].phone.includes(value2) === true && data[i].position.includes(value3) === true && data[i].type.includes(value4) === true && data[i].department.includes(value5) === true) {
                    searchData.push(data[i]);
                }
            }
            renderTbody(searchData);
        })
    </script>
</body>

</html>